<template>
  <div class="kj">
    <div class="header">
      <div class="header_zhong">
        <div class="text">
          <a href="./"> <img src="../../assets/images/logo.png"/></a>
        </div>
        <div class="in">
          <div>{{examName}}>> </div>
        <div @click="mockExam()" v-bind:style="style1" >模拟考试 </div>
         <div @click="itemBank()" v-bind:style="style2">试题库 </div>
          <div @click="ranking()" v-bind:style="style3">排行榜 </div>
        </div>
        <!--个人中心-->
        <div class="name">
          <Dropdown style="margin-left: 20px" placement="bottom-end" @on-click="userInfo">
            <a style="color: #333333;font-size: 18px" href="javascript:void(0)">
              <img src="../../assets/images/people.png" style="width: 22px;height: 23px"/>&nbsp;&nbsp;{{name}}
              <Icon color="#3B50A1" type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list" >
              <!-- <DropdownItem trigger="click" @click.native="people()"><span > 个人中心</span></DropdownItem>
              <DropdownItem trigger="click"  @click.native="esc()"><span> 退出</span></DropdownItem> -->
              <Dropdown-Item name="personal">个人中心</Dropdown-Item>
              <Dropdown-Item name="logout">退出</Dropdown-Item>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name:'',
        examName:'',

        style1:'',
        style2:'',
        style3:'',

      }
    },
    methods: {
      userInfo(name){
        if(name==="personal"){
          this.people()
        }else{
          this.esc()
        }
      },
      mockExam(){
        console.log('跳转到题考试页面')
        var a=this.$route.query.examId;
        var b=this.$route.query.examname
        this.$router.push({  //核心语句
          path:'/wholeMock/mockExam',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
            examId:a ,
            examname:b ,
          }
        })
      },

      itemBank(){
        console.log('跳转到题库页面')
        var a=this.$route.query.examId;
        var b=this.$route.query.examname
        this.$router.push({  //核心语句
          path:'/wholeMock/itemBank',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
            examId:a ,
            examname:b ,
          }
        })
      },
      ranking(){
        console.log('跳转到专题排行榜')
        var a=this.$route.query.examId;
        var b=this.$route.query.examname
        this.$router.push({  //核心语句
          path:'/wholeMock/ranking',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
            examId:a ,
            examname:b ,
          }
        })
      },
      esc:function () {//退出
        //跳转之前清除下缓存
          this.$cookies.remove('pcexam_id');//用户id
          this.$cookies.remove('pcexam_username');//用户名
          this.$cookies.remove('pcexam_name');//用户名
          this.$cookies.remove('pcexam_phone');//电话
          this.$cookies.remove('pcexam_position');//职务
          this.$cookies.remove('pcexam_departmentId');//部门id
          this.$router.push('/login')
      },
      people:function () {  //点击个人中心
        console.log("个人中心");
        this.$router.push({  //核心语句
          path:'/wholeCenter',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          }
        })
      },

    },

    mounted:function() {
    if (
      this.$cookies.get("pcexam_username") == undefined ||
      this.$cookies.get("pcexam_username") == "undefined" ||
      this.$cookies.get("pcexam_username") == "" ||
      this.$cookies.get("pcexam_username") == null ||
      this.$cookies.get("pcexam_username") == "null"
    ) {
      this.$router.push("/login");
    } else {
      var url = this.$route.path;
            console.log(url)
            if (url == '/wholeMock/mockExam') {
              this.style1='color: #244885; border-bottom: 2px solid #244885;';
              this.style2='color: #333333;';
              this.style3='color: #333333;';
            }
            if(url == '/wholeMock/itemBank'){
              this.style2='color: #244885; border-bottom: 2px solid #244885;';
              this.style1='color: #333333;';
              this.style3='color: #333333;';
            }
            if(url == '/wholeMock/ranking/rankTab1'){
              this.style3='color: #244885; border-bottom: 2px solid #244885;';
              this.style1='color: #333333;';
              this.style2='color: #333333;';
            }
            if(url == '/wholeMock/ranking/rankTab2'){
              this.style3='color: #244885; border-bottom: 2px solid #244885;';
              this.style1='color: #333333;';
              this.style2='color: #333333;';
            }
            if(url == '/wholeMock/ranking/rankTab3'){
              this.style3='color: #244885; border-bottom: 2px solid #244885;';
              this.style1='color: #333333;';
              this.style2='color: #333333;';
            }
            if(url == '/wholeMock/ranking/rankTab4'){
              this.style3='color: #244885; border-bottom: 2px solid #244885;';
              this.style1='color: #333333;';
              this.style2='color: #333333;';
            }

            if(this.$cookies.get('pcexam_username')==undefined||this.$cookies.get('pcexam_username')=="undefined"||this.$cookies.get('pcexam_username')==""||this.$cookies.get('pcexam_username')==null||this.$cookies.get('pcexam_username')=='null'){
      //        this.$router.push('/login');
            }else{
              this.name=this.$cookies.get('pcexam_username');
            }
            this.examName= this.$route.query.examname
        }

      
    },
    // 监听,当路由发生变化的时候执行
    watch:{
      $route(to,from){
        console.log(to.path);
        var url = to.path;
        console.log(url)
        if (url == '/wholeMock/mockExam') {
          this.style1='color: #244885; border-bottom: 2px solid #244885;';
          this.style2='color: #333333;';
          this.style3='color: #333333;';
        }
        if(url == '/wholeMock/itemBank'){
          this.style2='color: #244885; border-bottom: 2px solid #244885;';
          this.style1='color: #333333;';
          this.style3='color: #333333;';
        }
        if(url == '/wholeMock/ranking/rankTab1'){
          this.style3='color: #244885; border-bottom: 2px solid #244885;';
          this.style1='color: #333333;';
          this.style2='color: #333333;';
        }
        if(url == '/wholeMock/ranking/rankTab2'){
          this.style3='color: #244885; border-bottom: 2px solid #244885;';
          this.style1='color: #333333;';
          this.style2='color: #333333;';
        }
        if(url == '/wholeMock/ranking/rankTab3'){
          this.style3='color: #244885; border-bottom: 2px solid #244885;';
          this.style1='color: #333333;';
          this.style2='color: #333333;';
        }
        if(url == '/wholeMock/ranking/rankTab4'){
          this.style3='color: #244885; border-bottom: 2px solid #244885;';
          this.style1='color: #333333;';
          this.style2='color: #333333;';
        }
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .header{
    background: white;
    max-width:100%;
    height: 138px;
    background-image: url('../../assets/images/banner1.png');
    background-size: cover;
    z-index: 1;
    position: relative;
  }
  .header_zhong{
    position: relative;
    width: 1080px;
    height: 138px;
    margin: 0 auto;
    /*background-image: url('../../assets/images/banner1.png');*/
    background-size: cover;
  }
  .text{
    width: 1000px;
    padding-top:18px;
    position: relative;
  }
  .name{
    position: absolute;
    bottom: 10px;
    right: 37px;
  }
  .in{
    width: 707px;
    color:rgba(51,51,51,1);
    font-size: 18px;
    padding-top: 3px;
  }
  .in div:nth-of-type(2){
    /*margin-right: 20px;*/
    cursor: pointer;
  }
  .in div:nth-of-type(3){
    cursor: pointer;
  }

  .in div:nth-of-type(4){
    cursor: pointer;

  }
  .in div{
    display: inline-block;
    margin-left: 30px;
    line-height: 40px;
    text-align: center;
  }
  .peopleData>div:nth-of-type(4){
    border: none;
  }
  .peopleData>div>div:nth-of-type(1){
    font-size:36px;
    color:rgba(51,51,51,1);
  }
  .peopleData>div>div:nth-of-type(2),.peopleData>div>div:nth-of-type(3){
    font-size: 18px;
    color: #999999;
  }
  .crown img{
    width: 100%;
    height: 100%;
  }
</style>
